<template>
	<view class="page-set-up">
		<u-navbar title="设置" back-icon-color="#000" :border-bottom="false"
		title-size="36" title-color="#000" title-bold></u-navbar>
		<view class="header u-flex u-row-between u-col-center u-padding-left-30 
		u-padding-right-30 u-padding-top-46 u-padding-bottom-36" 
		@click="goNextPage('to','pages/HomeLnner/modify-avatar/modify-avatar')">
			<view class="header-left u-flex u-row-between u-col-center">
				<image :src="userInfo.logo.slice(0,4) == 'http'?userInfo.logo:$baseUrl + userInfo.logo" mode="aspectFill"></image>
				<view class="nickname u-margin-left-30 u-font-36 u-flex-1">
					{{userInfo.nickname}}
				</view>
			</view>
			<view class="header-right">
				<u-icon class="u-margin-left-32" name="arrow-right" size="30" color="#999"></u-icon>
			</view>
		</view>
		<view class="list-warp u-margin-top-20">
			<view class="list-item u-flex u-row-between u-col-center"
			@click="goNextPage('to','pages/HomeLnner/change-password/change-password')">
				<view class="list-left">修改密码</view>
				<view class="list-right u-flex u-row-between u-col-center">
					<u-icon class="u-margin-left-32" name="arrow-right" size="30" color="#999"></u-icon>
				</view>
			</view>
			<view class="line"></view>
			<view class="list-item u-flex u-row-between u-col-center"
			@click="goNextPage('to','pages/HomeLnner/change-phone/change-phone')">
				<view class="list-left">手机号</view>
				<view class="list-right u-flex u-row-between u-col-center">
					{{phone}}
					<u-icon class="u-margin-left-32" name="arrow-right" size="30" color="#999"></u-icon>
				</view>
			</view>
		</view>
		<view class="list-warp u-margin-top-20">
			<view class="list-item u-flex u-row-between u-col-center"
			@click="goNextPage('to','/pages/HomeLnner/help/help',{cmd:'nAbout_query_proc',id:'1030',title:'隐私政策'})">
				<view class="list-left">隐私政策</view>
				<view class="list-right u-flex u-row-between u-col-center">
					<u-icon class="u-margin-left-32" name="arrow-right" size="30" color="#999"></u-icon>
				</view>
			</view>
			<view class="line"></view>
			<view class="list-item u-flex u-row-between u-col-center"
			@click="goNextPage('to','/pages/HomeLnner/help/help',{cmd:'nAbout_query_proc',id:'1007',title:'用户协议'})">
				<view class="list-left">用户协议</view>
				<view class="list-right u-flex u-row-between u-col-center">
					<u-icon class="u-margin-left-32" name="arrow-right" size="30" color="#999"></u-icon>
				</view>
			</view>
		</view>
		<view class="list-warp u-margin-top-20">
			<view class="list-item u-flex u-row-between u-col-center">
				<view class="list-left">当前版本</view>
				<view class="list-right u-flex u-row-between u-col-center">
					1.0.0
					<u-icon class="u-margin-left-32" name="arrow-right" size="30" color="#999"></u-icon>
				</view>
			</view>
		</view>
		<u-button type="error" @click="logout" shape="circle" class="custom-style">退出登录</u-button>
		<u-toast ref="uToast" />
	</view>
</template>   

<script>
	export default {
		data() {
			return {
				$baseUrl:"",
				userInfo:null
			}
		},
		computed:{
			phone(){
				let reg = /^(\d{3})\d{4}(\d{4})$/;
				return this.userInfo.username.replace(reg,"$1****$2");
			}
		},
		onLoad() {
			this.$baseUrl = this.baseUrl
			if(this.$store.state.userIn){
				this.userInfo = JSON.parse(this.$store.state.userIn)
				// this.userInfo = this.$store.state.userIn
			}
		},
		methods: {
			goNextPage(type,url,params){
				this.$u.route({
					type:type,
					url: url,
					params:params
				})
			},
			logout(){
				this.$store.commit('$_setToken','')
				this.$store.commit('userIn','')
				this.$refs.uToast.show({
					title: '退出成功',
					type: 'success',
					back:true
				})
			}
		},
		onShow(){
			if(this.$store.state.userIn){
				this.userInfo = JSON.parse(this.$store.state.userIn)
			}
		}
	}
</script>

<style lang="scss" scoped>
.page-set-up{
	background-color: #f5f5f5;
	overflow: hidden;
	height: 100vh;
	.header{
		background-color: #fff;
		.header-left{
			image{
				width: 124rpx;
				height: 124rpx;
				border-radius: 100%;
			}
			.nickname{
				font-weight: bold;
			}
		}
	}
	.list-warp{
		padding: 0 30rpx;
		background-color: #fff;
		.list-item{
			height: 108rpx;
			.list-left{
				font-size: 34rpx;
			}
			.list-right{
				color: #666666;
				font-size: 30rpx;
			}
		}
	}
	.line{
		width: 100%;
		height: 1px;
		background-color: #e5e5e5;
	}
	.custom-style {
		background-color: #c40200;
		margin: 73rpx 30rpx;
		font-size: 30rpx;
		
	}
}
</style>
